<template>
  <div class="al-p-10">
    <el-tabs type="border-card" v-model="activeTab" @tab-click="handleClick" stretch>
      <el-tab-pane v-for="(item, index) in DocList" :key="item.name" :name="item.name">
        <template #label>
          <div class="al-flex al-align-item">
            <el-icon :color="colors[index]" size="18"><component :is="item.icon"/></el-icon>
            <strong>&nbsp;{{ item.title }}</strong>
          </div>
        </template>
      </el-tab-pane>
      <el-empty description="文档正在收录中" v-if="activeContent.length === 0"/>
      <el-row :gutter="20" style="margin:0;row-gap: 10px;">
        <el-col
          v-for="(doc, index) in activeContent"
          :key="doc.id"
          :span="8"
        >
          <el-card body-class="el-card-custom" shadow="hover">
            <template #header>
              <div class="al-flex al-space-between">
            <strong :style="{color: colors[index]}">
              {{ index + 1 }}.{{ doc.title }}
            </strong>
            <span v-if="doc.id === 'Element-Plus'">
              <el-icon :size="20" color="#1a86f9"><ElementPlus /></el-icon>
            </span>
            <Icon v-else-if="doc.icon" :icon="doc.icon" :style="{color: doc.iconColor}" class="al-size-20" />
            <el-image v-else style="height: 20px;width:20px;" :src="svg_chromajs" />
          </div>
            </template>
            <div>
              <h3 :class="`textGradient-${(index+1)%4}`">{{ doc.descript }}</h3>
              <p class="bottom al-size-14 al-line-height-24" style="white-space: pre-wrap;">
                {{ doc.detail }}
              </p>
            </div>
            <template #footer>
              <div class="al-flex al-space-evenly">
                <el-link type="primary" v-show="doc.link" :href="doc.link" target="_blank">
                  <el-icon class="el-icon--right"><Connection /></el-icon>
                  <span class="al-font">Document</span>
                </el-link>
                <el-link type="primary" :href="doc.preview" target="_blank">
                  <el-icon class="el-icon--right"><Connection /></el-icon>
                  <span class="al-font">Preview</span>
                  <Icon icon="svg-spinners:blocks-wave" class="al-m-l-6" style="color: #1a86f9" />
                </el-link>
              </div>
            </template>
          </el-card>
        </el-col>
      </el-row>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import svg_chromajs from '@/assets/svg/chroma.js.svg?url'
import {
  Connection,
  ElementPlus
} from '@element-plus/icons-vue'
import { DocList, colors, OPP } from './docs'

let activeTab = ref('doc')
let activeContent = ref(OPP[activeTab.value])
const handleClick = (tab: any) => {
  activeTab.value = tab.paneName
  activeContent.value = OPP[activeTab.value]
}
import { ref } from 'vue'
</script>

<style lang="scss" scoped>

</style>
